<!-- 终端命令----插播文字 -->
<template>
  <bs-dialog title="插播文字" :visible.sync="editor" size="default" @closed="doCloseEdit">
    <template slot="main">
      <el-form
        :inline="true"
        :model="editorForm"
        ref="editorFormRef"
        :rules="editorFormRules"
        label-width="50px"
        size="small"
        label-position="right"
        :show-message="false"
        :hide-required-asterisk="true"
      >
          <el-row>
              <el-col :span="24">
                  <el-form-item label="字体:" prop="fontName">
                      <el-select size="small" placeholder="默认" clearable v-model="editorForm.fontName" style="width:120px" @change="fontChange">
                          <el-option v-for="(item, index) in typefaceList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item prop="color">
                      <el-popover
                          placement="bottom" v-model="visible" trigger="manual">
                          <bs-color-picker v-model="editorForm.fontColor" @click="pickColor"></bs-color-picker>
                          <el-button slot="reference" style="width:120px" @click="visible = !visible">颜色</el-button>
                      </el-popover>
                  </el-form-item>
                  <el-form-item prop="playSpeed">
                      <el-select size="small" placeholder="低速" clearable v-model="editorForm.playSpeed" style="width:120px">
                          <el-option v-for="(item, index) in speedList" :key="index" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item prop="playType">
                      <el-select size="small" placeholder="播放时间(秒)" clearable v-model="editorForm.playType" style="width:150px">
                          <el-option v-for="(item, index) in playTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item prop="playValue">
                      <el-input placeholder="1" v-model="editorForm.playValue" autocomplete="off" maxlength="10" :show-word-limit="false" clearable style="width:160px"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item prop="content">
                      <el-input
                        id="insertTextInfo"
                        v-model="editorForm.content"
                        type="textarea"
                        rows="15"
                        maxlength="1000"
                        style="width:760px;"
                      >
                      </el-input>
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </template>
    <template slot="footer">
      <bs-confirm-button-icon @click.native="doSaveText"></bs-confirm-button-icon>
      <bs-cancel-button-icon :show-icon="false" :btn-type="btnType" @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fontItemArray } from '@/const/index.js'
import DeviceMonitorApi from '@/api/device'
import $ from 'jquery'

export default {
  name: 'InsertTextDialogDialog',
  data() {
    return {
      editor: false,
      editorForm: {},
      editorFormRef: {},
      editorFormRules: {
        content: { required: true, message: '请输入插播内容', trigger: 'blur' },
        playValue: { pattern: /^[0-9]*$/, message: '播放时间/播放次数输入格式有误' },
      },

      visible:false,
      btnType: '',
      typefaceList: fontItemArray,
      playTypeList:[
           { label:'播放时间(秒)', value:'1'},
           { label:'播放次数(次)', value:'2'}
      ],
      speedList: [
          { label:'低速', value:'0'},
          { label:'中速', value:'1'},
          { label:'高速', value:'2'}
      ],
      queryData: {}
    }
  },
  created() {
    this.$eventBus.$on('showInsertTextDialog', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('showInsertTextDialog');
  },
  components: {
  },
  directives: {
    elDragDialog
  },
  methods: {
    // 显示
    show(terminalIds, queryData) {
      this.queryData = queryData
      this.editorForm = {
        fontName: 0,
        fontColor:'#000000',
        playSpeed:'0',
        playType:'1',
        playValue:'1',
        terminalIds:terminalIds,
      };
      let divAdd = $('#insertTextInfo')
      divAdd.css('color', '#000000')
      this.editor = true;
    },
    // 颜色选取
    pickColor(val) {
      console.log(val)
      let divAdd = $('#insertTextInfo')
      divAdd.css('color', val)
      this.visible = false
      this.$set(this.editorForm, 'fontColor', val)
    },
    // 字体选取
    fontChange(val) {
      console.log(val)
    },
    // 关闭
    doCloseEdit() {
      this.$refs.editorFormRef.clearValidate()
      this.editor = false;
    },
    async doSaveText() {
      console.log(this.editorForm)
      this.$refs.editorFormRef.clearValidate()
      this.$refs.editorFormRef.validate(async (valid) => {
        if (valid) {
          try {
            const res = await DeviceMonitorApi.commandPlayAd({
              ...this.queryData,
              ...this.editorForm
            })
            this.$alert('提示', '插播文字指令发送完成')
            this.$eventBus.$emit('doCancelAllSize')
            this.editor = false;
          } catch (error) {
            this.$alert('提示',error.msg)
          }
        } else {
          let index = 0
          this.$refs.editorFormRef.fields.forEach((field) => {
            if (field.validateMessage) {
              if (index === 0) {
                console.log(field.validateMessage)
                this.$message.error(field.validateMessage)
                this.validateMsg = []
              }
              index++
            }
          })
          return
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    width: 820px !important;
    height: 500px !important;
  }
  ::v-deep .el-dialog__body {
    padding-top: 15px !important;
  }
</style>
